fix(Flag, Sidebar): move CSS variable defaults to private variables (DS-5396) by KamilEmeleev · Pull Request #451 · koobiq/react-components

KamilEmeleev · 2026-08-10T09:58:33Z

Summary by CodeRabbit

Improvements
- Improved Flag and Sidebar styling behavior by providing consistent fallback values for sizing, spacing, appearance, and transition settings.
- Existing public CSS customization options continue to work as expected.
Documentation
- Updated component CSS variable documentation to clarify supported overrides, inheritance, fallbacks, and usage guidelines.
- Simplified Flag and Sidebar variable tables by focusing descriptions on each variable’s purpose.

…5396)

coderabbitai · 2026-08-10T09:59:33Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e7cfd5a9-5ac2-426a-8dc2-f13dfb0518b2

📥 Commits

Reviewing files that changed from the base of the PR and between 43af5a8 and fac421c.

📒 Files selected for processing (5)

AGENTS.md
packages/components/src/components/Flag/Flag.mdx
packages/components/src/components/Flag/Flag.module.css
packages/components/src/components/Sidebar/Sidebar.mdx
packages/components/src/components/Sidebar/Sidebar.module.css

📝 Walkthrough

Walkthrough

The change documents component CSS variable conventions and updates Flag and Sidebar styles to use local defaults with public override fallbacks. CSS variable tables now describe purposes without listing default values.

Changes

Component CSS variables

Layer / File(s)	Summary
CSS variable documentation `AGENTS.md`	Documents private variables, public overrides, fallback usage, inheritance, and component CSS restrictions.
Flag variable fallbacks `packages/components/src/components/Flag/Flag.module.css`, `packages/components/src/components/Flag/Flag.mdx`	Adds local defaults for Flag sizing, ratio, radius, shadow color, and empty background. CSS declarations use these defaults when public overrides are absent. The variable table now lists purposes only.
Sidebar variable fallbacks `packages/components/src/components/Sidebar/Sidebar.module.css`, `packages/components/src/components/Sidebar/Sidebar.mdx`	Adds local duration and size defaults with fallbacks to existing public variables. The variable table now lists purposes only.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: nikgurev

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies Flag and Sidebar and accurately summarizes moving CSS variable defaults to private variables.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/DS-5396

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.14.0)

packages/components/src/components/Flag/Flag.module.css

ConfigurationError: Could not find "stylelint-config-css-modules". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:38:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:285:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:252:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:85:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)

packages/components/src/components/Sidebar/Sidebar.module.css

ConfigurationError: Could not find "stylelint-config-css-modules". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:38:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:285:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:252:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:85:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

github-actions · 2026-08-10T10:00:18Z

Visit the preview URL for this PR (updated for commit fac421c):

https://react-koobiq-next--prs-451-ljcecc1a.web.app

_{(expires Sat, 15 Aug 2026 10:00:07 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}

KamilEmeleev added 3 commits August 10, 2026 12:50

fix(components): move CSS variable defaults to private variables (DS-…

4791c8f

…5396)

style(Flag): drop redundant comment above the private CSS variables

adda1c6

fix(TopBar): restore the original CSS variable names (DS-5396)

fac421c

KamilEmeleev added the bug Something isn't working label Aug 10, 2026

KamilEmeleev merged commit 275dccb into main Aug 10, 2026
7 of 8 checks passed

KamilEmeleev deleted the fix/DS-5396 branch August 10, 2026 10:15

Navigation Menu

Uh oh!

fix(Flag, Sidebar): move CSS variable defaults to private variables (DS-5396) - #451

fix(Flag, Sidebar): move CSS variable defaults to private variables (DS-5396)#451
KamilEmeleev merged 3 commits into
mainfrom
fix/DS-5396

KamilEmeleev commented Aug 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

github-actions Bot commented Aug 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

KamilEmeleev commented Aug 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

github-actions Bot commented Aug 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

KamilEmeleev commented Aug 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 10, 2026 •

edited

Loading